<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
const data = reactive({
    activeName: '0',
    searchInput: '',
    tableData0: [
        { id: '皇001', name: '酆都大帝', type: "北罗阴酆都山", position: '冥神', birthday: '农历九月初九日', mode: '地府最高统治者' },
        { id: '皇002', name: '东岳大帝', type: "东岳大帝宫", position: '冥神', birthday: '农历九月初九日', mode: '地府最高统治者' },
        { id: '皇003', name: '地藏王菩萨', type: "地藏王菩萨宫", position: '冥神', birthday: '农历九月初九日', mode: '地府最高统治者' },
    ],
    tableData1: [
        { id: '帝001', name: '蔡郁垒、神荼', type: "桃止山", position: '东方鬼帝', birthday: '未知', mode: '治桃止山、鬼门关' },
        { id: '帝002', name: '赵文和、王真人', type: "嶓冢山", position: '西方鬼帝', birthday: '未知', mode: '治嶓冢山' },
        { id: '帝003', name: '张衡、杨云', type: "罗酆山", position: '北方鬼帝', birthday: '未知', mode: '治罗酆山' },
        { id: '帝004', name: '杜子仁', type: "罗浮山", position: '南方鬼帝', birthday: '未知', mode: '治罗浮山' },
        { id: '帝005', name: '周乞、嵇康', type: "抱犊山", position: '中央鬼帝', birthday: '未知', mode: '治抱犊山' },
    ],
    tableData2: [
        { id: '王001', name: '蒋子文', type: "第一殿", position: '秦广王', birthday: '二月初一日', mode: '专司人间寿夭生死，统管吉凶' },
        { id: '王002', name: '厉温', type: "第二殿", position: '楚江王', birthday: '三月初一日', mode: '专司活大地狱，即寒冰地狱' },
        { id: '王003', name: '余懃', type: "第三殿", position: '宋帝王', birthday: '二月初八日', mode: '专司黑绳大地狱' },
        { id: '王004', name: '吕岱', type: "第四殿", position: '五官王', birthday: '二月十八日', mode: '专司合大地狱，即血池地狱' },
        { id: '王005', name: '包拯', type: "第五殿", position: '阎罗王', birthday: '正月初八日', mode: '正月初八日诞辰，专司叫唤大地狱' },
        { id: '王006', name: '毕元宾', type: "第六殿", position: '卞城王', birthday: '三月初八日', mode: '专司大叫唤大地狱及枉死城' },
        { id: '王007', name: '董和', type: "第七殿", position: '泰山王', birthday: '三月二十七日', mode: '专司热闹地狱，即肉酱地狱' },
        { id: '王008', name: '黄中庸', type: "第八殿", position: '都市王', birthday: '四月初一日', mode: '专司大热闹大地狱，即闷锅地狱' },
        { id: '王009', name: '陆游', type: "第九殿", position: '平等王', birthday: '四月初八日', mode: '专司铁网阿鼻地狱' },
        { id: '王010', name: '薛礼', type: "第十殿", position: '转轮王', birthday: '四月十七日', mode: '专司各殿解到鬼魂，区别善恶，核定等级，发往投生' }
    ],
    tableData3: [
        { id: '判001', name: '阴律司 - 崔珏', type: "未知", position: '判官', birthday: '未知', mode: '左手执生死薄，右手拿勾魂笔，专门执行为善者添寿，让恶者归阴的任务' },
        { id: '判002', name: '罚恶司 - 钟馗', type: "终南山", position: '判官', birthday: '未知', mode: '凡来报到的鬼魂，先经孽镜台前映照，显明善恶、区分好坏' },
        { id: '判003', name: '察查司 - 陆之道', type: "未知", position: '判官', birthday: '未知', mode: '让善者得到善报，好事得到弘扬，使恶者受到应得的惩处，并为冤者平反昭雪' },
        { id: '判004', name: '赏善司 - 魏征', type: "未知", position: '判官', birthday: '未知', mode: '生前行善小鬼全部由他安排，根据生前行善程度大小、多少予以奖赏' },
        
    ],
    tableData4: [
        { id: '差001', name: '鬼王', type: "冥界", position: '冥帅', birthday: '未知', mode: '勾魂鬼差' },
        { id: '差002', name: '孟婆神', type: "奈何桥", position: '泰媪', birthday: '未知', mode: '提供孟婆汤，消除鬼魂的记忆' },
        { id: '差003', name: '日游神', type: "冥界", position: '冥帅', birthday: '未知', mode: '勾魂鬼差' },
        { id: '差004', name: '夜游神', type: "冥界", position: '冥帅', birthday: '未知', mode: '勾魂鬼差' },
        { id: '差005', name: '黑无常', type: "冥界", position: '勾魂使者', birthday: '未知', mode: '勾魂鬼差' },
        { id: '差006', name: '白无常', type: "冥界", position: '勾魂使者', birthday: '未知', mode: '勾魂鬼差' },
        { id: '差007', name: '牛头', type: "阎王庙", position: '勾魂使者', birthday: '未知', mode: '勾魂鬼差' },
        { id: '差008', name: '马面', type: "阎王庙", position: '勾魂使者', birthday: '未知', mode: '勾魂鬼差' },
        { id: '差009', name: '豹尾', type: "冥界", position: '勾魂使者', birthday: '未知', mode: '管理兽类动物亡灵' },
        { id: '差010', name: '鸟嘴', type: "冥界", position: '勾魂使者', birthday: '未知', mode: '管理天上鸟类动物亡灵' },
        { id: '差011', name: '鱼鳃', type: "冥界", position: '勾魂使者', birthday: '未知', mode: '管理水中鱼类动物亡灵' },
        { id: '差012', name: '黄蜂', type: "冥界", position: '勾魂使者', birthday: '未知', mode: '管理地上昆虫动物亡灵' },
    ]
})
</script>

<template>
    <div class="setup-admin">
        <el-tabs v-model="data.activeName">
            <el-tab-pane label="统治者" name="0">
                <el-table :data="data.tableData0" class="z-m-t-10" style="width: 100%" max-height="710" size="large" border>
                    <el-table-column prop="id" label="ID" align="center" width="150"/>
                    <el-table-column prop="name" label="姓名" align="center" width="150" />
                    <el-table-column prop="type" label="圣殿" align="center" width="150" />
                    <el-table-column prop="position" label="职位" align="center" width="150" />
                    <el-table-column prop="birthday" label="诞辰" align="center" width="150" />
                    <el-table-column prop="mode" label="职责" align="center" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="五方鬼帝" name="1">
                <el-table :data="data.tableData1" class="z-m-t-10" style="width: 100%" max-height="710" size="large" border>
                    <el-table-column prop="id" label="ID" align="center" width="150"/>
                    <el-table-column prop="name" label="姓名" align="center" width="150" />
                     <el-table-column prop="type" label="圣殿" align="center" width="150" />
                    <el-table-column prop="position" label="职位" align="center" width="150" />
                    <el-table-column prop="birthday" label="诞辰" align="center" width="150" />
                    <el-table-column prop="mode" label="职责" align="center" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="十殿阎王" name="2">
                <el-table :data="data.tableData2" class="z-m-t-10" style="width: 100%" max-height="710" size="large" border>
                    <el-table-column prop="id" label="ID" align="center" width="150"/>
                    <el-table-column prop="name" label="姓名" align="center" width="150" />
                     <el-table-column prop="type" label="圣殿" align="center" width="150" />
                    <el-table-column prop="position" label="职位" align="center" width="150" />
                    <el-table-column prop="birthday" label="诞辰" align="center" width="150" />
                    <el-table-column prop="mode" label="职责" align="center" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="四大判官" name="3">
                <el-table :data="data.tableData3" class="z-m-t-10" style="width: 100%" max-height="710" size="large" border>
                    <el-table-column prop="id" label="ID" align="center" width="150"/>
                    <el-table-column prop="name" label="姓名" align="center" width="150" />
                     <el-table-column prop="type" label="圣殿" align="center" width="150" />
                    <el-table-column prop="position" label="职位" align="center" width="150" />
                    <el-table-column prop="birthday" label="诞辰" align="center" width="150" />
                    <el-table-column prop="mode" label="职责" align="center" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="阴帅鬼差" name="4">
                <el-table :data="data.tableData4" class="z-m-t-10" style="width: 100%" max-height="710" size="large" border>
                    <el-table-column prop="id" label="ID" align="center" width="150"/>
                    <el-table-column prop="name" label="姓名" align="center" width="150" />
                     <el-table-column prop="type" label="圣殿" align="center" width="150" />
                    <el-table-column prop="position" label="职位" align="center" width="150" />
                    <el-table-column prop="birthday" label="诞辰" align="center" width="150" />
                    <el-table-column prop="mode" label="职责" align="center" />
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped lang="scss">

</style>